<template>
    <div class="has-padding-sm">
        <form class="well" method="post" @submit.prevent="submit()">
            <input v-model="submitFormat.BeMenu.id" hidden/>
            <div class="control no-margin">
                <label>{{this.$t('parent')}}</label>
                <div class="select">
                    <select v-model="submitFormat.BeMenu.parent_id">
                        <option v-for="item in parents"
                                :value="item.id"
                                :selected="item.id == submitFormat.BeMenu.parent_id">{{item.label}}
                        </option>
                    </select>
                </div>
            </div>
            <div class="control no-margin">
                <label>{{this.$t('label')}}</label>
                <input class="input" v-model="submitFormat.BeMenu.label" required="required"/>
                <p class="red-pale text-tint">{{helpText.label}}</p>
            </div>
            <div class="control">
                <label>{{this.$t('name')}}</label>
                <input class="input" v-model="submitFormat.BeMenu.name" required="required"/>
                <p class="red-pale text-tint">{{helpText.name}}</p>
            </div>
            <div class="control">
                <label>{{this.$t('path')}}</label>
                <input class="input" v-model="submitFormat.BeMenu.path" required="required"/>
                <p class="red-pale text-tint">{{helpText.path}}</p>
            </div>
            <div class="control">
                <label>{{this.$t('icon')}}</label>
                <input class="input" v-model="submitFormat.BeMenu.icon"/>
                <p class="red-pale text-tint">{{helpText.icon}}</p>
            </div>
            <div class="control">
                <label>{{this.$t('position')}}</label>
                <input class="input" type="number" v-model="submitFormat.BeMenu.position" required="required"/>
                <p class="red-pale text-tint">{{helpText.position}}</p>
            </div>
            <button type="submit" class="btn fluid grass">{{$t('submit')}}</button>
        </form>

        <Loading ref="loading"></Loading>
        <Toast ref="toast"></Toast>
    </div>

</template>
<script>
    import * as api from '../api/index'
    import Loading from "@/components/Loading";
    import Toast from "@/components/Toast";

    export default {
        components: {Toast, Loading},
        data() {
            return {
                submitFormat: {
                    BeMenu: {
                        id: '',
                        name: '',
                        label: '',
                        parent_id: 0,
                        path: '',
                        icon: '',
                        position: 50,
                    }
                },
                parents: [],
                helpText: {}
            }
        },
        mounted() {
            this.setDefaultHelpText();
            let params = this.$route.params;
            this.submitFormat.BeMenu.id = params.id;
            this.getModel();
        },
        methods: {
            setDefaultHelpText() {
                this.helpText = {
                    name: '',
                    label: '',
                    parent_id: '',
                    path: '',
                    icon: '',
                    position: '',
                }
            },
            async submit() {
                this.$refs.loading.start();
                this.setDefaultHelpText();
                let result = await api.edit(this.submitFormat.BeMenu.id, this.submitFormat);
                if (result) {
                    this.$refs.loading.stop();
                    this.$refs.toast.show(result.meta.msg);
                    if (result.meta.code !== '000') {
                        this.parents = result.data.parents;
                        this.helpText = result.data.model;
                    }
                }
            },
            async getModel() {
                this.$refs.loading.start();
                let that = this;
                let result = await api.getModel({id: that.submitFormat.BeMenu.id});
                if (result) {
                    this.$refs.loading.stop();
                    that.submitFormat.BeMenu = result.data.model;
                    that.parents = result.data.parents;
                }
            }
        }
    }
</script>